<template>
    <div style="min-height:100vh;background: #f5f5f5;position:relative;">
        <div :style="notecaseStyle" class="myBalance">
            <span>账户余额(元)</span>
            <p>{{balance}}</p>
        </div>
        <ul class="setPutforwardMsg">
            <li style="position:relative"><span>提现金额：</span><input v-model="money" type="number" @change="tofixed(2)">
            <span style="color:#666666;font-size:13px;float:right;line-height:30px;position: absolute;top: 0px;right: 0px;line-height: 60px;width: auto" @click="allMoneyFunc">全部提现</span></li>
            <li><span>支付宝账号：</span><input v-model="number" type="text"></li>
            <li><span>支付宝昵称：</span><input v-model="name" type="text"></li>
            <li><span>真实姓名：</span><input v-model="username" type="text"></li>
        </ul>
        <button class="submitButton" @click="onSubmit">提交申请</button>

    </div>
</template>

<script>

    import request from "@/request/index.js"
    export default {
        name: "notecase",
        components: {

        },
        data() {
            return {
                balance:0,
                money:null,
                number:'',
                name:'',
                username:'',
                // allMoney:1000.00,
                data:{},
                type:1,
                notecaseStyle:{
                    backgroundImage: "url(" + require("../assets/img/bg.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                    width:'100vw',
                    height:'125px',
                    margin:'0 auto',
                }
            }
        },
        watch:{

        },
        methods:{
            isPopNone:function(){
                this.isPop=false;
            },
            allMoneyFunc:function(){
                this.money=Number(this.balance).toFixed(2);
            },
            tofixed(num){
                if(this.money>Number(this.balance)){
                    this.$toast('余额不足')
                }else{

                }
                
            },
            onSubmit(){
                if(this.money>=100&&this.number&&this.name&&this.username){
                    request.setPutforward(this)
                }else{
                    if(!(this.money&&this.number&&this.name&&this.username)){
                        this.$toast('信息填写不完整')
                    }else{
                        this.$toast('对不起，提现金额不能小于100元')
                    }
                }

            }
        },
        mounted() {
            this.balance=localStorage.getItem('balance')
            request.getExtract(this)
        },
    }
</script>

<style scoped lang="scss">
    .myBalance{
        text-align: center;
        color: #ffffff;
        padding-top: 50px;
        p{
            font-size: 20px;
        }
    }
        .setPutforwardMsg{
        margin-top:20px;
        background: #ffffff;
        padding:0 4vw;
        color:#333333;
        font-size:15px;
        li{
            // margin-bottom: 20px;
            border-bottom: 1px solid #f5f5f5;
            line-height: 4em;
            span{
                display: inline-block;
                width: 100px;
            }
            input{
                border:none;
                outline: none;
                margin-left: 10px;
            }
        }
        li:nth-last-child(){
            border-bottom: none;
        }
    }
    .setPutforwardPost{
        text-align: center;
        margin-top: 30px;
        button{
            width: 75vw;
            background:#55A9FF!important;
            color:#ffffff;
            font-size: 15px;
            height: 40px;
            border:none;
            outline: none;
            border-radius: 8px;
            overflow: hidden;
        }
        p{
            font-size:12px;
            color:#666666;
            line-height: 2em;
        }
    }
    .submitButton{
        width: 100vw;
        line-height: 50px;
        background: #FF4C4C;
        color: #ffffff;
        position: fixed;
        bottom: 0px;
    }
</style>
